<template>
    <div class="main-login" v-if="backgroundLoaded">
        <div class="header">
            <div>
                <!-- 放图标 -->
                <el-image :crossorigin="null" style="width: 50px; height: 43px;margin-top: 1vh;" :src="logoUrl"
                    fit="scale-down" />
                <div id="introlet">
                    <span>飞鸟物流</span>
                </div>
            </div>
            <div>
                <div>首页</div>
                <div>文档</div>
                <div>社区</div>
                <div>简体中文</div>
            </div>
        </div>

        <div class="content">
            <div class="Form">
                <div>
                    <div class="qrlogin" @click="qrToLogin">扫码登录</div>
                    <div class="pwdlogin" @click="pwdToLogin">密码登录</div>
                </div>
                <div>
                    <KeepAlive>
                        <LoginPwd v-if="isPwd"></LoginPwd>
                        <LoginQR v-else></LoginQR>
                    </KeepAlive>
                </div>
            </div>
        </div>
    </div>
    <div v-else>
        <el-skeleton animated style="width: 100%">
            <template #template>

                <div style="padding: 14px">
                    <el-skeleton-item variant="p" style="width: 100%;height: 6vh" />
                   
                    <div style="display: flex;align-items: center;
            justify-items: space-between; ">

                        <div style="width: 70%; height: 80vh;margin-right: 10%;margin-top: 1%;"></div>
                        <div style="width: 30%;display: flex;flex-direction: column;justify-content: space-between;">
                            <el-skeleton-item variant="rect" style="width: 100%;height: 10vh;margin-bottom: 2vh;" />
                            <el-skeleton-item variant="rect" style="width: 100%;height: 60vh;margin-bottom: 2vh;" />
                        </div>
                    </div>
                </div>
            </template>
        </el-skeleton>
    </div>
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent, onMounted } from 'vue'
import { logoUrl } from '@/common/common'
import { ElSkeleton } from 'element-plus';

// 使用defineAsyncComponent实现懒加载
const LoginPwd = defineAsyncComponent(() => import('@/components/LoginPwd.vue'));
const LoginQR = defineAsyncComponent(() => import('@/components/LoginQR.vue'));

let isPwd = ref<boolean>(true)
let backgroundLoaded = ref<boolean>(false)

// 扫码登录处理函数
const qrToLogin = () => {
    console.log("扫码处理中...")
    isPwd.value = false;
}
const pwdToLogin = () => {
    console.log("验证密码中...")
    isPwd.value = true;
}

onMounted(() => {
        const img = new Image();
        img.src = "https://cityexpress.yellowswimming.cn/img/hdynO.jpeg";
        img.onload = () => {
            backgroundLoaded.value = true;
        };
});

</script>
<style scoped lang="less">
.main-login {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;

    .header {
        width: 100%;
        flex: 1;
        display: flex;
        justify-content: space-between;
    }

    .header>div:first-child {
        width: 20%;
        display: flex;
    }

    .header>div:nth-child(2) {
        width: 30%;
        display: flex;
        justify-content: space-between;

        >div {
            padding: 10px;
            margin-right: 17px;
            font-size: 1rem;
            font-family: 'Microsoft YaHei';
            color: #858991;
            display: flex;
            flex-direction: column;
            justify-content: center;

        }

    }

    .content {
        flex: 15;
        margin: 0;
        padding: 0;
        background-image: url("https://cityexpress.yellowswimming.cn/img/hdynO.jpeg");
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        height: 100vh;
        display: flex;
        justify-content: flex-end;
        border: 1px solid #ccc;
        padding: 10px;

        .Form {
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
            height: 83%;
            width: 32%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            >div:first-child {
                flex: 1;
                display: flex;
                justify-content: space-between;
                font-size: 1rem;
                font-family: 'Microsoft YaHei';
                color: rgb(20, 2, 2);
                border-bottom: 1px solid #dfe1e6;

                .qrlogin {
                    flex: 1;
                    background-color: #ffffff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-right: 1px solid #dfe1e6;

                    &:hover {
                        cursor: pointer;
                        background-color: #ccc;
                    }
                }

                .pwdlogin {
                    flex: 1;
                    background-color: #ffffff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .pwdlogin:hover {
                    cursor: pointer;
                    background-color: #ccc;
                }
            }

            ;

            >div:nth-child(2) {
                flex: 8;
                background-color: white;
                display: flex;
                justify-content: center;
                align-items: center;
            }

        }
    }

    #introlet {
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 1rem;
        font-family: 'Microsoft YaHei';
        color: rgb(20, 2, 2);
        span{
            font-size: 1rem;
            color: black;
            font-weight: 700;
        }
    }

}
</style>